<template>
    <a-layout style="height: 100%">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo">
                <img src="@/assets/logo.png" alt="">
                <span v-if="!collapsed">小说管理系统</span>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @select="changeMenu">
                <a-menu-item key="1">
                    <user-outlined />
                    <span>用户列表</span>
                </a-menu-item>
                <a-menu-item key="2" @click="goBookList">
                    <book-outlined />
                    <span>小说管理</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header class="header" style="background: #fff; padding: 0;display:flex;">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                <div>
                    <img class="avatar" :src="user.avatar" alt="">
                    <a-dropdown>
                        <a class="ant-dropdown-link" @click.prevent>
                            {{user.nickname}}
                            <DownOutlined  style="margin-right:20px"/>
                        </a>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" @click="logout">退出</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <a-layout-content :style="{
                    margin: '24px 16px',
                    padding: '24px',
                    background: '#fff',
                    minHeight: '280px',
                    overflow:'auto',
                    height:'100%'
                }">
                <router-view />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
import {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    BookOutlined,
    DownOutlined
} from "@ant-design/icons-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import defaultAvatar from "@/assets/img/avatar.jpg";
import {host} from '@/api/index'
export default defineComponent({
    components: {
        UserOutlined,
        VideoCameraOutlined,
        UploadOutlined,
        MenuUnfoldOutlined,
        MenuFoldOutlined,
        BookOutlined,
        DownOutlined
    },

    setup() {
        const router = useRouter();
        const changeMenu = function (e) {
            if (e.key === "1") {
                router.push("/userList");
            }
            if (e.key === "2") {
                router.push("/bookList");
            }
        };
        // function goBookList() {}

        const user = ref({});
        onMounted(() => {
            let userStr = localStorage.getItem("user");
            user.value = JSON.parse(userStr) || {};
            if (!user.value.avatar) {
                user.value.avatar = defaultAvatar;
            }else{
                user.value.avatar = host + user.value.avatar
            }
        });
        const logout = ()=>{
            localStorage.removeItem('user')
            router.replace('/login')
        }
        return {
            selectedKeys: ref(["1"]),
            collapsed: ref(false),
            changeMenu,
            user,
            logout
        };
    },
});
</script>
<style lang="less">
.trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.trigger:hover {
    color: #1890ff;
}

.logo {
    height: 32px;
    // background: rgba(255, 255, 255, 0.3);
    margin: 16px;
    color: #fff;
    img {
        width: 22px;
        height: 22px;
    }
}

.site-layout .site-layout-background {
    background: #fff;
}
.header {
    background: #fff;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
</style>